<template>
  <div>
    <div class="head">
      <van-col span="8">
        <div class="login">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561540339973&di=9a6ce8489fa521b09daa7ad3da4c072d&imgtype=0&src=http%3A%2F%2Fwww.bynrnews.com%2Fnew%2Fqiye%2Fupload%2F1563%2Fadmin%2F20190322%2Fa67a1cd780a247f4aea2dc21d64df107.jpg" alt="">
        </div>
      </van-col>
      <van-col span="8">
        <van-button round class="login login1" to="/login">登录</van-button>
      </van-col>
      <van-col span="8">
        <van-button round class="login" to="/register">注册</van-button>
      </van-col>
    </div>
    <div class="main">
      <van-cell-group>
        <van-field
        v-model="username"
          required
          left-icon="user-o"
          placeholder="请输入用户名"
          
        />

        <van-field type="password" v-model="password" left-icon="closed-eye" clearable placeholder="请输入密码" required />
      </van-cell-group>
    </div>
    <div class="foot">
      <router-link to="/toremember" tag="p">无需登陆访问此网站</router-link>
      <button class="foot_1"  ref="btn" @click="login()">登录</button>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';

export default {
  name: "Login",
  data() {
    return {
      username:'',
      password:'',
      token:''
    }
  },
  methods: {
    login(){
      let _this = this;
      Axios({
        url:'http://10.8.158.60:8080/user/login',
        params:{
          username:_this.username,
          password:_this.password
          }
      }).then(function(data){
        if(data.data.code == 1){
          _this.token = data.data.msg.uid
          _this.$store.commit('user',_this.username)
           _this.$store.commit('token',_this.token)
            _this.$store.commit('pass',_this.password)
          _this.$router.push('/toremember')
        }else{
          alert(data.data.msg)
          _this.$router.push('/register')
        }
        
      })
    }

  },
 

};
</script>

<style scoped>
.body {
  width: 375px;
  background-color: #ffffff;
}
.head {
  padding-top: 20px;
  width: 375px;
  height: 250px;
  line-height: 20px;
  border-radius: 8px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;

}
.main {
  margin-top: 80px;
}
.login {
  width: 99px;
  height: 42px;
  line-height: 20px;
  border-radius: 56px;
  background-color: rgba(232, 231, 231, 1);
  color: rgba(100, 100, 100, 1);
  font-size: 14px;
  text-align: center;
  overflow: hidden;
}
.login img{
  width: 99px;
  height: 42px;
}
.login1{
  background: orange;
 
}
.van-cell-group{
  height: 300px;
}
.foot p{
  text-align: center
}

.foot_1 {

  width: 375px;
  height: 65px;
  line-height: 20px;
  background-color: rgba(255, 182, 75, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  margin-top: 78px;
  border: 0
}
</style>
